import Users from './user';
import Card from './css/Card';
import { MyRow, Mytable, MyUpload, MyTab, BaseF,BaseF111 } from '../Myantd';
import { Table, ConfigProvider } from 'antd';
import styles from './index.less';
import { useState } from 'react';
import { MyBtn } from './components/index';
import lodash from 'lodash';
import { convert } from 'flattenjs';
import { DOMElement, ReactElement } from 'react';
import SS from '@/pages/utils/SS';

export default () => {
  const [RowIndex, setRowIndex] = useState(0);
  const [DoubleClickRow, setDoubleClickRow] = useState(0);
  const dataSource = [];

  const jsonObject = {
    agentInfo: null,
    ownerInfo: [
      {
        customerGuid: '962411dd-aec1-554f-9d8a-df7dd3c3df92',
        ownerClientId: '00805733',
        // 其他字段
      },
    ],
    // 其他字段
  };

  const compressedJsonString = JSON.stringify(jsonObject);
  console.log('compressedJsonString', compressedJsonString);

  const aa = [{ a: 3 }, { b: 2 }, { a: 2 }];
  console.log(
    aa.reduce((pre, cur) => {
      if (!pre.includes(Object.keys(cur)[0])) {
        pre.push(Object.keys(cur)[0]);
      }
      return pre;
    }, []),
  );

  SS.setItem('1', '123');
  // console.log("SS.getItem('1')", SS.getItem('1'));
  // localStorage.setItem('1', JSON.stringify({ a: '1' }));
  // localStorage.setItem('1', JSON.stringify({ a: '2' }));
  // console.log('111', localStorage.getItem('1'));

  const splitfun = 'You are adding leave {0}for {1}{0} from {2} - {3} for {4} day{5}s{5}. Pease confirm to continue'.split(
    '{0}',
  );
  console.log('splitfun', splitfun);
  const flatMapfun = splitfun.flatMap;
  console.log('flatMapfun', flatMapfun);
  // const fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
  // console.log('arrsplice1', fruits.splice(1, 2));
  // console.log('arrsplice2', fruits.splice(1, 0));
  var fruits = ['Banana', 'Orange', 'Apple', 'Mango'];
  console.log(
    'fruits.splice(2,1,"Lemon","Kiwi");',
    fruits.splice(2, 1, 'Lemon', 'Kiwi'),
  );
  function formatMessageEnhanced(
    obj: any,
    ...args: (
      | number
      | string
      | ReactElement
      | ((a: string | ReactElement | number) => string | ReactElement | number)
    )[]
  ): string | (string | ReactElement | number)[] {
    // const res =
    //   'You are adding leave for {0}{1}{0} from {2} - {3} for {4} day{5}s{5}. Pease confirm to continue';
    const res =
      'You are adding leave {0}for {1}{0} from {2} - {3} for {4} day{5}s{5}. Pease confirm to continue.';
    const insertVal: (
      a: string,
      b: number,
    ) => (number | string | ReactElement)[] | string = (str, index) => {
      const arr: (ReactElement | string | number)[] = str.split(`{${index}}`);
      if (arr.length >= 2) {
        const replaceVal = args[index];

        if (typeof replaceVal === 'function') {
          for (
            let replaceIndex = 1;
            replaceIndex < arr.length - 1;
            replaceIndex += 2
          ) {
            arr[replaceIndex] = replaceVal(arr[replaceIndex]);
          }
        } else {
          for (
            let spliceIndex = arr.length - 1;
            spliceIndex > 0;
            spliceIndex--
          ) {
            arr.splice(spliceIndex, 0, replaceVal);
          }
        }
      }

      if (index >= args.length - 1) return arr;

      return arr.flatMap((item: string | ReactElement | number) => {
        if (typeof item !== 'string') return item;
        return insertVal(item, index + 1);
      });
    };

    return args.length ? insertVal(res, 0) : res;
  }

  for (let i = 1; i < 200; i++) {
    dataSource.push({
      key: i,
      name: `Edward King ${i}`,
      age: 32,
      address: `London, Park Lane no. ${i}`,
    });
    if (i === 25) {
      for (let i = 25; i < 29; i++) {
        dataSource.push({
          key: i,
          name: `Edward King ${i}aaa`,
          age: 32,
          address: `London, Park Lane no. ${i}`,
        });
      }
    }
    if (i === 30) {
      for (let i = 30; i < 40; i++) {
        dataSource.push({
          key: i,
          name: `Edward King ${i}bbb`,
          age: 32,
          address: `London, Park Lane no. ${i}`,
        });
      }
    }
    if (i === 80) {
      for (let i = 80; i < 90; i++) {
        dataSource.push({
          key: i,
          name: `Edward King ${i}ccc`,
          age: 32,
          address: `London, Park Lane no. ${i}`,
        });
      }
    }
  }

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      // key: 'name',
      render: (recode: any) => {
        return `${recode}AAAAAAA`;
      },
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
  ];
  const clickfun = () => console.log('click_btn');

  const onClickRow = (event, index) => {
    setRowIndex(index);
    if (DoubleClickRow === index) console.log('setDoubleClickRow'); //如果再次点击了改变样式的行，执行
  };
  const onDoubleClickRow = (event, index) => {
    console.log('onDoubleClickRow'); //快速双击某行执行
  };
  const rowClassNamefun = (rowitem, i) => {
    if (i === RowIndex) {
      setDoubleClickRow(i);
      return `${styles.rowBgColor}`; //点击某行改变行样式
    } else {
      return i % 2 === 0 ? `${styles.oddRow}` : `${styles.evenRow}`; //奇偶行样式
    }
  };
  return (
    <div>
      {/* <Users></Users> */}
      {/* <Card></Card> */}
      <BaseF></BaseF>
      <BaseF111></BaseF111>
      <MyTab></MyTab>
      <MyUpload />
      <MyRow></MyRow>
      <Mytable></Mytable>
      <div className={styles.tableaaa}>
        <ConfigProvider
          theme={{
            components: {
              Table: {
                headerBg: '#f6a04d',
              },
              // Button: {
              //   defaultHoverBorderColor: '#f6a04d',
              //   defaultHoverColor: '#f6a04d',
              // },
            },
          }}
        >
          <Table
            scroll={{ y: 600 }}
            //rowKey 请确保唯一，会影响到table的行会多出来不知道哪里来的数据
            rowKey={(dataSrow, rowIndex) => {
              // console.log('dataSrow', dataSrow, rowIndex);

              dataSrow.key;
            }}
            rowClassName={rowClassNamefun}
            onRow={(event, index) => {
              return {
                onClick: () => onClickRow(event, index),
                onDoubleClick: () => onDoubleClickRow(event, index), //双击需求，但不是需求要的
              };
            }}
            dataSource={dataSource}
            columns={columns}
          />
          <MyBtn onClick={clickfun}>click</MyBtn>
          <br />
          <MyBtn onClick={clickfun}>click</MyBtn>
        </ConfigProvider>
      </div>

      <div>
        {formatMessageEnhanced(
          { Label_COM_WarningMessage: 'MSG_001031' },
          (str) => '',
          <span className={styles.modalStrong}>{''}</span>,
          <span className={styles.modalStrong}>{'十二'}</span>,
          <span className={styles.modalStrong}>{'十三'}</span>,
          <span className={styles.modalStrong}>{'1'}</span>,
          (str) => 'bb',
        )}
      </div>
    </div>
  );
};
